<template>
	<!-- 立即預定 -->
	<view class="container">
		<view class="book_name">
			<text>{{ details.name }}</text>
			<view class="book_state" v-if="details.room_status == 0">空閒中</view>
			<view class="cleaning" v-if="details.room_status == 2">
				<view class="using_text cleaning_text">待打掃</view>
				<!-- <view class="count_down">
					<u-count-down :time="details.updatetime / 3600" format="mm:ss"></u-count-down>
					<text>結束</text>
				</view> -->
			</view>
			<view class="cleaning" v-if="details.room_status == 3">
				<view class="using_text cleaning_text">保潔中</view>
				<view class="count_down">
					<u-count-down :time="details.updatetime / 3600" format="mm:ss"></u-count-down>
					<text>結束</text>
				</view>
			</view>
			<view class="free" style="background: red;" v-if="details.room_status == 4">{{ details.room_status_msg }}
			</view>
		</view>
		<view class="book_box">
			<view class="book_date">
				<view class="day_week" :class="{ active: index == check_index }" v-for="(item, index) in day_week"
					:key="index" @tap="check_day(index, item)">
					<text>{{ item.date }}</text>
					<text>{{ index == 0 ? "今天" : item.week }}</text>
				</view>
			</view>
			<view class="select_package_title">
				<text>點選優惠套餐</text>
				<image src="@/static/images/jiantou_xiangxia.png" mode="widthFix"></image>
			</view>
			<view class="select_package" v-if="details.package_list?details.package_list.length:false">
				<view class="select_package_item" :class="{ active: index === check_package }"
					v-for="(item, index) in details.package_list" :key="index" @tap="select_package(index)">
					<text>{{ item.duration_hour }}小時</text>
					<text>現價${{ Math.floor(item.price) }}</text>
				</view>
			</view>
			<view v-else style="margin: 20rpx;text-align: center;">暂无套餐</view>
			<view class="select_time">
				<view class="start_time" style="margin-bottom: 30rpx;" @click="openStartTime">
					<text>開始時間</text>
					<view class="inp">
						<view class="">{{startValue}}</view>
						<image src="/static/images/xiangxiajiantou.png" mode=""></image>
					</view>
				</view>

				<u-datetime-picker confirmText="確認" v-model="startTimeValue" @confirm="confirmStart"
					:closeOnClickOverlay="true" @close="showStart = false" @cancel="showStart = false" :show="showStart"
					mode="time"></u-datetime-picker>

				<view class="end_time" @click="showSelectUseDuration">
					<text>使用時長</text>
					<view class="inp" :class="{ active: !showEndTime }">
						<view :class="{defaultclass:useDuration==='請選擇使用時長'}">{{useDuration}}</view>
					</view>
				</view>
				<u-picker confirmText="確認" @confirm='confirmUseDuration' @close='showUseDuration = false'
					@cancel='showUseDuration = false' :closeOnClickOverlay="true" :show="showUseDuration"
					:columns="columns"></u-picker>
			</view>

			<view class="can_book_time">
				<text>已預訂時段</text>
				<text>可預訂時段</text>
			</view>

			<!-- 可預訂時段 -->
			<view class="period_time">
				<view class="book_day">{{ bookDay }}</view>
				<view class="book_state_time box">
					<view style="display: flex;">
						<view class="bs" style="height: 30rpx;" v-for="(timeBarItem,timebarIndex) in timeBar"
							:key="timebarIndex" :style="{width:100/timeBar.length + '%' }">
							<view class="bs_deep" v-for="(orderTimeItem,orderIndex) in orderTimelot(room_times)"
								:key="orderIndex">
								<view class="deep" :style="{width:setWidth(timeBarItem,orderTimeItem) + '%'}"
									v-if="timeBarItem>=orderTimeItem.start && timeBarItem<=orderTimeItem.end"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<view :style="{width:100/timeBarText.length + '%' }" v-for="(item,index) in timeBarText"
							:key="index">
							<text>{{item==0?'次日':item}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="order_money">
				<text>1小時金額</text>
				<text
					style="color: #FA533D;width: 150rpx;font-weight: bold;">${{ Number(details.price).toFixed(0) }}</text>
			</view>
			<view class="order_money">
				<text>-會員折扣</text>
				<text
					style="color: #000;width: 150rpx;font-weight: bold;">{{ storeDetails.vip_rate == 0 ? 0 : storeDetails.vip_rate + '折' }}</text>
			</view>

			<view class="order_money" @tap="show_select_coupon">
				<text>-優惠劵</text>
				<text style="width: 150rpx;font-weight: bold;"
					:class="{ active: selectCouponText !== '選擇優惠券' }">{{ selectCouponText }}</text>
			</view>

			<view class="order_money">
				<text>支付金額</text>

				<text style="color: #FA533D;width: 150rpx;font-weight: bold;">${{ Number(sumPrice) }}</text>
			</view>

		</view>

		<view class="place_order">
			<view class="title">下單須知：</view>
			<view class="" v-if="!notice">
				<view class="prompt">1.訂單保留15分鐘，15分鐘自動確認到店</view>
				<view class="prompt">2.訂單最多可提前60分鐘確認到店(前面沒其他客人)</view>
				<view class="prompt">3.如需取消，請聯繫客服人員</view>
			</view>
			<view class="" v-else>
				<view class="prompt" v-for="(item,index) in notice" :key="index">{{item}}</view>
			</view>
		</view>

		<view class="determine">

			<text>${{ Number(sumPrice) }}</text>
			<view class="determine_btns">
				<view class="determine_btns_item" @tap="member_stored_value">會員儲值</view>
				<view @tap="buy_now" style="background-color: #39B19D;color: #fff;" class="determine_btns_item">立即購買
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popup_box" style="height: 1088rpx;width: 100%;background: #fff;">
				<view style="font-size: 30rpx;text-align: center;">支付金額</view>
				<view style="color: #FA533D;font-size: 46rpx;font-weight: bold;text-align: center;">
					${{ Number(sumPrice) }}</view>
				<view style="margin: 19rpx 0 31rpx 30rpx;">選擇付款方式</view>
				<view class="payment_method">
					<radio-group @change="radioChange" class="radio_box">
						<label v-for="(item, index) in paymentMethod" :key="item.value">
							<text :class="{ active: radioChecked == item.value }">{{ item.value }}</text>
							<radio :value="item.value" :checked="currentCheck == index" color="#39B19D" />
						</label>
					</radio-group>

					<view class="balance" v-if="radioChecked == '餘額付款'">餘額<text
							style="margin-left: 15rpx;color: #FA533D;">{{ userStoreInfo.balance }}</text></view>

					<view @tap="showCardPopup = true" class="card_text" v-if="radioChecked == '儲值卡付款'">
						<text>{{ selectCardText }}</text>
						<text style="margin-left: 30rpx;"
							v-if="rechargeCardInfo">餘額{{ rechargeCardInfo.remaining_money }}</text>
					</view>

				</view>
				<view class="confirm_payment" @tap="confirm_payment">
					{{ radioChecked == '信用卡/轉帳 藍新' || radioChecked == '信用卡/轉帳 綠界' ? '提交' : '確認支付' }}
				</view>

				<view class="popup_box_tips">
					<view>注意：</view>
					<view class="popup_box_tips_details">
						<u-icon name="warning-fill" color="#FA533D" size="20"></u-icon>
						<text>訂單保留15分鐘，請在15分鐘內繳費完成</text>
					</view>

				</view>

			</view>
		</uni-popup>




		<u-popup :show="showCardPopup" @close="showCardPopup = false" :closeOnClickOverlay="true" round="16"
			mode="center">
			<scroll-view scroll-y="true" v-if="rechargeCardList.length" class="card_popup_box">
				<view class="card_item" :class="{ active: rechargeCardInfo ? rechargeCardInfo.id == item.id : false }"
					@tap="selectCard(item)" v-for="item in rechargeCardList" :key="item.id">
					<view class="title">
						<view class="card_name">{{ item.title }}</view>
						<view class="end_time">有效期至{{ convertTime(item.expire_time * 1000) }}</view>
					</view>
					<view class="card_balance">餘額 <text>{{ item.remaining_money }}</text> </view>
				</view>
			</scroll-view>
			<view style="width: 100%;padding: 20rpx 100rpx;" v-else>暫無儲值卡</view>
		</u-popup>


		<u-keyboard mode="number" :show="show" :tips="tips.join(' ')" @change="keyboardChange"
			@backspace="keyboardBackspace" @close="cancel" @cancel="cancel"></u-keyboard>

		<u-popup :show="showSelectCouponPopup" @close="showSelectCouponPopup = false" :closeOnClickOverlay="true"
			mode="bottom" round='16'>
			<select-coupon :info="couponInfo" :minPrice="sumPrice" @selectCouponInfo="selectCouponInfo"
				:userCouponList="userCouponList" :store_id="details.id"></select-coupon>
		</u-popup>


	</view>
</template>

<script>
	import dayjs from "dayjs"
	import {
		getUserStoreInfo,
		getCouponTicketCard,
		getUserCouponAll,
		getStoreInfo
	} from '@/api/me.js'

	import store from "@/store/index.js"

	import {
		getRoomInfo,
		reservationOrder,
	} from '@/api/index.js'

	import {
		getLinePayInfo,
		getOrderNotice
	} from '@/api/order.js'

	import selectCoupon from './component/selectCoupon.vue'

	export default {
		components: {
			selectCoupon,
		},
		data() {
			return {
				showSelectCouponPopup: false,
				// week:""
				day_week: [],
				check_index: 0,

				check_package: null,
				startTime: "",
				startValue: "",
				endValue: "",
				bookDay: "",
				// num_time: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, "次日", 1],
				num_time: [],
				num_time_stamp: [],
				timeStampList: [],
				colorDeep: [
					// {
					// 	start: 10:00,
					// 	end: 13:00
					// },
				],
				colorDeepStamp: [],
				packagesNumber: 1,
				// orderMoney: 0,
				paymentMethod: [{
					value: "餘額付款",
					checked: false
				}, ],
				radioChecked: "",
				currentCheck: 0,
				show: false,
				tips: ["__", "__", "__", "__", "__", "__"],
				// 支付密碼
				payment_password: [],
				details: {},
				userStoreInfo: {},
				sumPrice: '',
				storeDetails: '',
				store_config: {},
				showEndTime: true,
				selectPackageInfo: '',
				userCouponList: [],
				couponInfo: {},
				selectCouponText: '選擇優惠券',
				showStart: false,
				showEnd: false,
				startTimeValue: "",
				endTimeValue: "",
				useDuration: '請選擇使用時長',
				columns: [],
				showUseDuration: false,
				sum: '',
				room_times: [],
				room_times_color: [],
				selectCardText: '選擇儲值卡',
				showCardPopup: false,
				rechargeCardList: [],
				rechargeCardInfo: null,
				form: '',

				// 时间展示条
				timeBar: [], // 存放当前时间之后的24小时
				timeBarText: [], // 存放时间文本
				win: '',
				systemInfo: '',
				first: false,
				isLinePay: { // 判断是否唤醒linepay 支付
					flag: false,
					info: null,
				},
				notice: null,
			};
		},
		onLoad(option) {
			this.getTimeandWeek()
			// this.startTime = dayjs().hour() + ":" + dayjs().minute()
			this.bookDay = dayjs().year() + "-" + this.addMarh(dayjs().month() + 1) + "-" + this.addMarh(dayjs().date())

			this.setTimeBar()
			this.radioChecked = this.paymentMethod[0].value
			// console.log(this.radioChecked, "查看")

			this.storeDetails = store.state.storeDetails
			// console.log(this.storeDetails, "店鋪詳情")
			this.getOrderNoticeFn(this.storeDetails.id)
			getUserStoreInfo({
				store_id: this.storeDetails.id
			}).then(res => {
				this.userStoreInfo = res.data
				// console.log(res.data, "用戶店鋪餘額")

				this.rechargeCardList = res.data.recharge_card
			}).then(() => {
				getRoomInfo({
					// room_id: this.details.id,
					room_id: option.id,
					date: this.bookDay
				}).then(res => {
					this.details = res.data
					// console.log(res.data, "包廂信息1111111111")


					this.room_times = [...this.details.times_arr]
					this.roomTimeStamp(this.room_times)

					if (this.userStoreInfo.user_level) {
						this.sumPrice = Number(this.details.price) * this.storeDetails.vip_rate / 10
						this.sum = Number(this.details.price) * this.storeDetails.vip_rate / 10
					} else {
						this.sumPrice = Number(this.details.price)
						this.sum = Number(this.details.price)
					}

					// this.setPayment(res.data.pay_type_list)

				})
			})
			// this.store_config = JSON.parse(option.store_config)
			this.store_config = this.storeDetails.store_config
			// console.log(this.store_config, "店鋪配置")
			this.setupDuration(this.store_config)
			this.startReservationTime()

			this.reservation_time()

			this.numTimeStamp(this.num_time)

			if (process.env.NODE_ENV == 'development') {
				// H5
				this.win = 'H5'
			} else if (process.env.NODE_ENV == 'production') {
				// APP
				this.win = 'APP'

				this.systemInfo = uni.getSystemInfoSync()
			}

		},
		onReady() {},
		onShow() {
			if (this.isLinePay.flag && this.isLinePay.info) {
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					getLinePayInfo({
						...this.isLinePay.info
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 6000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: `/pages/order_details/order_details?id=${res.data.id}`
								})
							}, 1500)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 6000
							})
						}
					})
				}, 1000)
			}
		},
		methods: {
			getOrderNoticeFn(store_id) {
				getOrderNotice({
					store_id
				}).then(res => {
					// console.log(res, '下單須知')
					if (res.data) {
						const se = /[；。\n]/
						this.notice = res.data.split(se)
						// console.log(this.notice, '下單須知')
					}
				})
			},
			getTimeandWeek() {
				//获取当前时间
				var now = new Date();
				//往后几天就循环几次
				for (let i = 0; i < 7; i++) {
					//24 * 3600 * 1000 就是计算一天的时间  
					var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var year = date.getFullYear();
					var month = date.getMonth() + 1;

					var day = date.getDate();
					var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var weekDay = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
					//把七天的时间和星期添加到数组中
					this.day_week.push({
						// date: year + '-' + this.addMarh(month) + '-' + this.addMarh(day),
						date: this.addMarh(month) + '-' + this.addMarh(day),
						week: weekDay[dt2.getDay()],
						checked: false,
						year,
					});
				}
			},
			addMarh(date) {
				return date = date < 10 ? "0" + date : date
			},
			check_day(index, key) {
				this.check_index = index
				// this.bookDay = dayjs().year() + "-" + key.date
				this.bookDay = `${key.year}-${key.date}`
				// console.log(key, this.bookDay)

				getRoomInfo({
					room_id: this.details.id,
					date: this.bookDay
				}).then(res => {
					// console.log(res.data,'res')
					this.room_times = res.data.times_arr

					this.roomTimeStamp(this.room_times)
				})

				this.setTimeBar()
			},
			select_package(index) {
				// console.log(index,'選擇套餐')
				if (index === this.check_package) {
					this.check_package = null
					this.showEndTime = true
					this.selectPackageInfo = ''
					// this.sumPrice = this.sum
					this.sum = 0
					this.sumPrice = 0
					this.couponInfo = {}
					this.selectCouponText = '選擇優惠券'
					this.useDuration = '請選擇使用時長'
				} else {
					this.check_package = index
					this.showEndTime = false
					this.selectPackageInfo = this.details.package_list[index]
					// this.startReservationTime()
					const duration = this.selectPackageInfo.duration_hour + '小時'
					this.updateEndTime(this.startValue, duration)

					this.sumPrice = this.setMemberPrice(this.selectPackageInfo.price)
					this.sum = this.setMemberPrice(this.selectPackageInfo.price)

					this.useDuration = this.selectPackageInfo.duration_hour + '小時'
					this.couponInfo = {}
					this.selectCouponText = '選擇優惠券'
				}
			},
			selectStartTime(e) {
				// console.log(e,"選擇時間")
				this.startValue = e.detail.value
			},
			selectEndTime(e) {
				this.endValue = e.detail.value
			},
			reduce() {
				this.packagesNumber = --this.packagesNumber < 1 ? 1 : this.packagesNumber
			},
			add() {
				this.packagesNumber++
			},
			buy_now() {
				if (this.useDuration == '請選擇使用時長') {
					uni.showToast({
						title: '請選擇使用時長',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.$refs.popup.open("bottom")
				// if (!this.userStoreInfo.balance) {
				getUserStoreInfo({
					store_id: this.details.store_id
				}).then(res => {
					this.userStoreInfo = res.data
					// console.log(res.data, "用戶店鋪餘額")
					// this.rechargeCardList = [[...res.data.recharge_card]]
					this.rechargeCardList = res.data.recharge_card

					this.setPayment(res.data.pay_type_list)
				})
				// }

			},
			radioChange(e) {
				this.radioChecked = e.detail.value

				this.paymentMethod.forEach((item, index) => {
					if (item.value == this.radioChecked) {
						this.currentCheck = index
						// console.log(index,"1111")
					}
				})


			},
			confirm_payment() {
				// this.show = true
				console.log(this.radioChecked)
				let payType = ''
				switch (this.radioChecked) {
					case '信用卡/轉帳 藍新':
						payType = 1;
						break;
					case '信用卡/轉帳 綠界':
						payType = 2;
						break;
					case 'Line Pay':
						payType = 4;
						break;
					case '餘額付款':
						payType = 6;
						break;
					case '儲值卡付款':
						payType = 7;
						break;
					case 'Apple pay':
						payType = 9
				}

				switch (payType) {
					case 1:
						this.confirm_payment1();
						break;
					case 2:
						this.confirm_payment2();
						break;
					case 4:
						this.confirm_payment4();
						break;
					case 6:
						this.confirm_payment6();
						break;
					case 7:
						this.confirm_payment7();
						break;
					case 9:
						this.confirm_payment9();
						break;
				}

			},
			keyboardChange(e) {
				if (this.payment_password.length < 6) {
					this.payment_password.push(e)
				}

				this.$set(this.tips, this.payment_password.length - 1, "*")

				// console.log(this.payment_password, "支付密碼", this.tips)
			},
			keyboardBackspace() {
				if (this.payment_password.length > 0) {
					this.payment_password.pop()
					this.$set(this.tips, this.payment_password.length, "__")
				}

				// console.log(this.payment_password, "刪除", this.tips)

			},
			// 關閉支付密碼鍵盤
			cancel() {
				this.show = false
				this.tips = ["__", "__", "__", "__", "__", "__"]
				this.payment_password = []
			},
			reservation_time() {
				// console.log(this.storeDetails.open,'open')
				// 設置預約時間段總時長（根據店鋪營業時間）
				let startTime = Number(this.storeDetails.open.split(':')[0])
				// let endTime = this.store_config ? Number(this.storeDetails.close.split(':')[0]) - Number(this
				// .store_config.order_end_time.split(
				// ':')[0]) : Number(this.storeDetails.close.split(':')[0])
				// console.log(startTime, endTime, "起始時間")

				let endTime = 0
				if (this.store_config) {
					if (this.store_config.order_end_time) {
						endTime = Number(this.storeDetails.close.split(':')[0]) - Number(this.store_config.order_end_time
							.split(':')[0])
					} else {
						endTime = Number(this.storeDetails.close.split(':')[0])
					}
				} else {
					endTime = Number(this.storeDetails.close.split(':')[0])
				}

				// 將營業時間轉換成時間戳
				let startTimeStamp = startTime * 60 * 60 * 1000
				let endTimeStamp = endTime * 60 * 60 * 1000
				// console.log(startTimeStamp, endTimeStamp, "時間戳")

				if (endTimeStamp <= startTimeStamp) {
					endTimeStamp = endTimeStamp + 24 * 60 * 60 * 1000
				}

				if (this.store_config) {
					// console.log(this.store_config,'peizhi')
					// 按照店鋪配置的時間表間隔
					// let h = Number(this.store_config.schedule_interval.split(':')[0])
					// let h = 0
					// let m = Number(this.store_config.schedule_interval.split(':')[1])
					// console.log(h, m, "時間表間隔")

					let h = 0
					let m = 0
					if (this.store_config.schedule_interval) {
						h = Number(this.store_config.schedule_interval.split(':')[0])
						// let h = 0
						m = Number(this.store_config.schedule_interval.split(':')[1])
					} else {
						h = 1
						m = 0
					}

					// 時間表間隔時間戳
					let timeStamp = h * 60 * 60 * 1000 + m * 60 * 1000
					let arr = []
					for (var i = startTimeStamp; i <= endTimeStamp; i += timeStamp) {
						// arr.push(i)
						if ((i / 60 / 60 / 1000) >= 24) {
							arr.push(i - (24 * 60 * 60 * 1000) ? i - (24 * 60 * 60 * 1000) : 24 * 60 * 60 * 1000)
						} else {
							arr.push(i)
						}
					}
					this.timeStampList = [...arr]
					// console.log(this.timeStampList, 'timeStampList')

					let hour = ''
					let min = ''
					arr.forEach(item => {
						hour = Math.floor(item / 1000 / 60 / 60)
						min = Math.floor((item % (1000 * 60 * 60)) / (1000 * 60))
						min = min > 10 ? min : '0' + min
						this.num_time.push(hour + ':' + min)
					})
					// console.log(this.num_time)

					let arrColor = []
					this.colorDeep.forEach(item => {
						arrColor.push({
							start: item.start * 60 * 60 * 1000,
							end: item.end * 60 * 60 * 1000
						})
					})
					// console.log(arrColor,"color")
					this.colorDeepStamp = [...arrColor]

				} else {
					// 當營業時間不超過24點的時候
					if (endTime < 24) {
						for (var i = startTime; i <= endTime; i++) {
							this.num_time.push(i)
						}
					}

					// 當營業時間是超過24點，即開到凌晨或者24小時營業的時候
					if (endTime <= startTime) {
						for (var i = startTime; i <= endTime + 24; i++) {
							if (i < 24) {
								this.num_time.push(i)
							} else if (i == 24) {
								this.num_time.push('次日')
							} else {
								this.num_time.push(i - 24)
							}
						}
					}
					// console.log(this.num_time, "2222222222")
				}


			},
			show_select_coupon() {
				this.showSelectCouponPopup = true
				getUserCouponAll({
					room_id: this.details.id
				}).then(res => {
					this.userCouponList = res.data
					// console.log(res.data,"優惠券列表")
				})
			},
			selectCouponInfo(item) {
				this.couponInfo = item
				// console.log(item, '優惠券列表')

				console.log(this.sum, '查看')
				if (item.id) {
					this.showSelectCouponPopup = false
					this.selectCouponText = "-" + item.money
				} else {
					this.selectCouponText = '選擇優惠券'
				}

				if (this.couponInfo.money) {
					this.sumPrice = this.sum - Number(this.couponInfo.money)
				} else {
					this.sumPrice = this.sum
				}

			},

			confirmStart(e) {
				// console.log(e)
				this.startValue = e.value
				this.showStart = false
				this.updateEndTime(e.value, this.useDuration)
			},
			showSelectEnd() {
				if (this.showEndTime) {
					this.showEnd = true
				}
			},
			openStartTime() {
				this.showStart = true
			},
			showSelectUseDuration() {
				if (this.showEndTime) {
					this.showUseDuration = true
				}
			},
			confirmEnd(e) {
				this.endValue = e.value
				this.showEnd = false
				// console.log(this.details.price,"包廂價格")
				// computedPriceByDuration(this.startValue, this.endValue, this.details.price)
			},
			confirmUseDuration(e) {
				// console.log(e.value[0])
				this.useDuration = e.value[0]
				this.showUseDuration = false
				this.computedPriceByDuration(this.useDuration, this.details.price, this.store_config)
				this.updateEndTime(this.startValue, e.value[0])
			},
			member_stored_value() {
				uni.navigateTo({
					url: "/pages/stored_value/stored_value"
				})
			},
			submit() {},
			confirm_payment1() {
				// console.log(this.startValue + ',' + this.endValue)
				// return
				// this.submit()
				reservationOrder({
					room_id: this.details.id,
					pay_type: 1,
					money: this.sumPrice,
					date: this.bookDay,
					timeslot: this.startValue + ',' + this.endValue,
					package_id: this.selectPackageInfo == "" ? "" : this.selectPackageInfo.id,
					coupon_id: this.couponInfo.id
				}).then(res => {
					// console.log(res, 'res')
					if (res.code == 1) {
						this.form = {
							...res.data
						}

						uni.navigateTo({
							url: `/pages/book_now/outward_payment/outward_payment?payData=${JSON.stringify(this.form)}&type=1`
						})
						// this.submit()

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					// this.$refs.popup.close()
				})
			},
			confirm_payment2() {
				// this.submit()
				reservationOrder({
					room_id: this.details.id,
					pay_type: 2,
					money: this.sumPrice,
					date: this.bookDay,
					timeslot: this.startValue + ',' + this.endValue,
					package_id: this.selectPackageInfo == "" ? "" : this.selectPackageInfo.id,
					coupon_id: this.couponInfo.id
				}).then(res => {
					console.log(res, 'res')
					if (res.code == 1) {
						this.form = {
							...res.data
						}
						uni.setStorageSync('MerchantTradeNo', res.data.MerchantTradeNo)
						// console.log(this.form,'form')

						uni.navigateTo({
							// url: `/pages/book_now/outward_payment/outward_payment?form=${JSON.stringify(res.data)}`
							url: `/pages/book_now/outward_payment/outward_payment?form=${JSON.stringify(this.form)}&type=2`
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					// this.$refs.popup.close()
				})
			},

			confirm_payment6() {
				// return
				if (Number(this.sumPrice) <= this.userStoreInfo.balance) {
					reservationOrder({
						room_id: this.details.id,
						pay_type: 6,
						money: this.sumPrice,
						date: this.bookDay,
						timeslot: this.startValue + ',' + this.endValue,
						package_id: this.selectPackageInfo == "" ? "" : this.selectPackageInfo.id,
						coupon_id: this.couponInfo.id ? this.couponInfo.id : ''
					}).then(res => {
						// console.log(res, "預約成功")
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							})

							setTimeout(() => {
								uni.reLaunch({
									url: `/pages/order_details/order_details?id=${res.data.id}`
								})
							}, 1500)

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						this.$refs.popup.close()


					}).catch(res => {
						console.log(res, '錯誤')
						uni.showToast({
							title: res,
							icon: 'none'
						})
					})
				} else {
					uni.showToast({
						title: '餘額不足',
						icon: 'none'
					})
				}
			},
			confirm_payment7() {
				if (this.rechargeCardInfo) {
					if (Number(this.sumPrice) < Number(this.rechargeCardInfo.remaining_money)) {
						reservationOrder({
							room_id: this.details.id,
							pay_type: 7,
							money: this.sumPrice,
							date: this.bookDay,
							timeslot: this.startValue + ',' + this.endValue,
							package_id: this.selectPackageInfo == "" ? "" : this.selectPackageInfo.id,
							coupon_id: this.couponInfo.id,
							card_id: this.rechargeCardInfo.id
						}).then(res => {
							// console.log(res, "預約成功")
							if (res.code == 1) {
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 2000
								})
								setTimeout(() => {
									uni.reLaunch({
										url: `/pages/order_details/order_details?id=${res.data.id}`
									})
								}, 2000)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
							this.$refs.popup.close()
						})

					} else {
						uni.showToast({
							title: '該儲值卡餘額不足',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '請選擇儲值卡',
						icon: 'none'
					})
				}


			},
			confirm_payment4() {
				reservationOrder({
					room_id: this.details.id,
					pay_type: 4,
					money: this.sumPrice,
					date: this.bookDay,
					timeslot: this.startValue + ',' + this.endValue,
					package_id: this.selectPackageInfo == "" ? "" : this.selectPackageInfo.id,
					coupon_id: this.couponInfo.id
				}).then(res => {
					console.log(res, 'res')

					if (res.code == 1) {
						this.wakeUp(res.data.result)
						// this.wakeUp(res.data)
						this.isLinePay = {
							flag: true,
							info: res.data.pay_log
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					this.$refs.popup.close()
				})
			},

			// 喚醒line pay
			wakeUp(path) {
				const systemInfo = uni.getSystemInfoSync()
				// #ifdef APP-PLUS
				if (systemInfo.platform === 'Android') {
					const params = {
						pname: 'jp.naver.line.android',
						action: 'line://'
					}
					if (this.determine(params)) {
						// 已下載line pay
						plus.runtime.openURL(path, function() {
							// plus.nativeUI.alert('本機未安裝指定的應用')
						})
					} else {
						plus.runtime.openURL(`market://details?id=${params.pname}`, function() {
							// plus.nativeUI.alert('本機未安裝指定的應用')
						})
					}
				} else if (systemInfo.platform === 'ios') {
					const params = {
						appid: ''
					}
					plus.runtime.launchApplication({
						action: path
					}, function() {
						plus.nativeUI.actionSheet({
							title: '應用市場',
							cancel: '取消',
							buttons: [{
								title: '應用市場'
							}]
						}, function({
							index
						}) {
							switch (index) {
								case 1:
									plus.runtime.openURL(
										`itms-apps://itunes.apple.com`,
										function() {
											// plus.nativeUI.alert('本機未安裝指定的應用')
										})
							}
						})
					})
					// this.determine()
					plus.runtime.openURL(path, function() {
						// plus.nativeUI.alert('本機未安裝指定的應用')
					})
				}
				// #endif

				// #ifdef H5
				// uni.navigateTo({
				// 	url: `/pages/book_now/outward_payment/outward_payment?url=${path}&type=4`
				// })

				const userAgent = navigator.userAgent
				if (/(Android)/i.test(userAgent)) {
					// Android平台
					window.location.href = path
				} else if (/iPhone|iPad|iPod/i.test(userAgent)) {
					// ios平台
					window.location.href = path
				}

				// #endif

			},
			lineIos(path) {
				uni.showLoading({
					title: '加載中...'
				})
				const currentTime = +(new Date())
				window.location.href = path
				let _count = 0,
					timer;
				timer = setInterval(function() {
					_count++;
					const endTIme = +(new Date()) - currentTime
					if (_count >= 100 || endTIme > 3000) {
						uni.hideLoading()
						clearInterval(timer)
					}
					let hidden = window.document.hidden || window.document.mozHidden || window.document
						.msHidden ||
						window.document.webkitHidden
					if (typeof hidden == 'undefined' || hidden == false) {
						uni.showToast({
							title: '當前設備未安裝有Line Pay',
							icon: 'none',
							duration: 3000
						})
						window.location.href = `itms-apps://itunes.apple.com`
					}
				}, 20)
			},
			lineAndroid(path) {
				uni.showLoading({
					title: '加載中...'
				})
				const currentTime = +(new Date())
				window.location.href = path
				let _count = 0,
					timer;
				timer = setInterval(function() {
					_count++;
					const endTIme = +(new Date()) - currentTime
					if (_count >= 100 || endTIme > 3000) {
						uni.hideLoading()
						clearInterval(timer)
					}
					let hidden = window.document.hidden || window.document.mozHidden || window.document
						.msHidden ||
						window.document.webkitHidden
					if (typeof hidden == 'undefined' || hidden == false) {
						uni.showToast({
							title: '當前設備未安裝有Line Pay',
							icon: 'none',
							duration: 3000
						})
						window.location.href = `market://details?id=jp.naver.line.android`
					}
				}, 20)
			},
			// 判斷是否有安裝line pay
			determine() {
				const install = plus.runtime.isApplicationExist()
				return install
			},

			confirm_payment9() {
				let url_type
				if (process.env.NODE_ENV == 'development') {
					// H5
					url_type = '02'
				} else if (process.env.NODE_ENV == 'production') {
					// APP
					url_type = '01'
				}
				console.log(url_type)
				reservationOrder({
					room_id: this.details.id,
					pay_type: 9,
					money: this.sumPrice,
					date: this.bookDay,
					timeslot: this.startValue + ',' + this.endValue,
					package_id: this.selectPackageInfo == "" ? "" : this.selectPackageInfo.id,
					coupon_id: this.couponInfo.id,
					url_type,
				}).then(res => {
					if (res.code == 1) {
						this.form = {
							...res.data
						}

						uni.navigateTo({
							url: `/pages/book_now/outward_payment/outward_payment?AppleForm=${JSON.stringify(this.form)}&type=9`
						})
						// this.submit()

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})


			},
			requestIapOrder(iap) {
				uni.showToast({
					title: `requestIapOrder==>${iap}`,
					icon: 'none',
					duration: 5000
				})
				let ids = [1001]
				iap.requestOrder(ids, function(res) {
					let iapOrder = true
					this.goApplePay(iap)
				}, function(e) {
					uni.showToast({
						title: `獲取訂單信息失敗${e.code}`,
						icon: 'none',
						duration: 3000
					})
				})
			},
			goApplePay(iap) {
				let _this = this
				reservationOrder({
					room_id: this.details.id,
					pay_type: 4,
					money: this.sumPrice,
					date: this.bookDay,
					timeslot: this.startValue + ',' + this.endValue,
					package_id: this.selectPackageInfo == "" ? "" : this.selectPackageInfo.id,
					coupon_id: this.couponInfo.id
				}).then(res => {
					// 發起支付
					plus.payment.request(iap, {
						productid: 1001,
						username: res.data.order_no
					}, function(result) {
						_this.appleNotify(result)
					}, function(e) {
						showToast('支付失敗')
					})
				})
			},
			appleNotify(notifyData) {
				// 支付成功
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					duration: 2000
				})
			},

			startReservationTime() {
				// this.startTimeValue = dayjs().hour() + ":" + dayjs().minute()
				let a = dayjs().hour() * 60 * 60 * 1000 + dayjs().minute() * 60 * 1000 + 5 * 60 * 1000
				let h = Math.floor(a / 60 / 60 / 1000)
				let m = Math.floor((a % (60 * 60 * 1000)) / 60 / 1000)
				this.startTimeValue = this.montage(h) + ':' + this.montage(m)
				// console.log(this.showEndTime,'showEndTime')
				if (this.showEndTime) {
					if (this.store_config) {
						let a1 = Number(this.store_config.charging_min_time.split(':')[0]) * 60 * 60 * 1000 +
							Number(this
								.store_config.charging_min_time.split(':')[1]) * 60 * 1000 + a
						// let h1 = Math.floor((a1 + 60 * 60 * 1000) / 60 / 60 / 1000) > 10 ? Math.floor((a1 + 60 * 60 *
						// 	1000) / 60 / 60 / 1000) : '0' + Math.floor((a1 + 60 * 60 * 1000) / 60 / 60 / 1000)
						let h1 = Math.floor((a1 + 60 * 60 * 1000) / 60 / 60 / 1000)

						let m1 = (Math.floor(((a1 + 60 * 60 * 1000) % (60 * 60 * 1000)) / 60 / 1000))
						// this.endTimeValue = h1 + ':' + m1
						h1 = h1 >= 24 ? h1 - 24 : h1
						this.endTimeValue = this.montage(h1) + ':' + this.montage(m1)

					} else {
						let h = this.montage(Math.floor((a + 60 * 60 * 1000) / 60 / 60 / 1000))
						h = h >= 24 ? h - 24 : h
						this.endTimeValue = h + ':' + this
							.montage((Math.floor(((a + 60 * 60 * 1000) % (60 * 60 * 1000)) / 60 / 1000)))
					}
				} else {
					// console.log(this.selectPackageInfo,'1111111111111')
					// let duration = this.selectPackageInfo.duration_hour.split('小')[0]
					let duration = this.selectPackageInfo.duration_hour
					// console.log(duration, '11111111111')
					let h = this.montage(Math.floor((a + 60 * 60 * 1000 * duration) / 60 / 60 / 1000))
					h = h >= 24 ? h - 24 : h

					this.endTimeValue = h + ':' +
						this.montage((Math.floor(((
							a +
							60 *
							60 * 1000) % (60 * 60 * 1000)) / 60 / 1000)))

					// console.log(this.endTimeValue,'11111111')
				}
				this.startValue = this.startTimeValue
				this.endValue = this.endTimeValue
			},
			computedPriceByDuration(duration, price, config) {
				if (duration == '全天') {
					duration = '24小時'
				}

				if (this.userStoreInfo.user_level) {
					if (this.storeDetails.vip_rate !== 0) {
						price = price * this.storeDetails.vip_rate / 10
					}
				}


				// console.log(config, '配置')
				if (config) {
					// 最小計費時長
					// let minChargingDuration = config.charging_min_time.split(':')[1]
					let minChargingDuration = config.charging_min_time
					// 最小計費時長的價格
					let minPrice = (price / (60 / minChargingDuration)).toFixed(2)



					if (duration.indexOf('小時') !== -1) {
						if (duration.indexOf('分鐘') !== -1) {
							let h = Number(duration.split('小時')[0])
							let m = Number(duration.split('小時')[1].split('分鐘')[0])

							// this.sumPrice = Number((h * price)) + Number(m * minPrice)

							// if (m <= minChargingDuration) {} else {
							let n = Math.ceil(m / minChargingDuration)

							// }
							this.sumPrice = Number((h * price)) + Number(n * minPrice)
							this.sum = Number((h * price)) + Number(n * minPrice)

							console.log(this.sumPrice, '計算')
						} else {
							let h = Number(duration.split('小時')[0])
							this.sumPrice = h * price
							this.sum = h * price
						}
						// console.log(this.sumPrice)
					} else {
						let m = Number(duration.split('分鐘')[0])

						// console.log('不足一小時')
						let n = Math.ceil(m / minChargingDuration)

						// }
						this.sumPrice = Number(n * minPrice)
						this.sum = Number(n * minPrice)
					}
				} else {

					if (duration.indexOf('小時') !== -1) {
						if (duration.indexOf('分鐘') !== -1) {
							let h = Number(duration.split('小時')[0])
							let m = Number(duration.split('小時')[1].split('分鐘')[0])
							// console.log(duration.split('小時'), "chakan")
							this.sumPrice = Number(h * price) + Number(m * price / 60)
							this.sum = Number(h * price) + Number(m * price / 60)

						} else {
							let h = Number(duration.split('小時')[0])
							this.sumPrice = h * price
							this.sum = h * price
						}
						// console.log(this.sumPrice)
					} else {
						// console.log('不足一小時')
						this.sumPrice = Number(m * price / 60)
						this.sum = Number(m * price / 60)
					}
				}

				if (this.couponInfo.money) {
					this.sumPrice = this.sum - Number(this.couponInfo.money)
				} else {
					this.sumPrice = this.sum
				}

			},
			montage(num) {
				return num >= 10 ? num : '0' + num
			},
			setupDuration(config) {
				// console.log(config, '配置')
				if (config) {
					// 默認預約時長  --- 時間戳
					let defaultBookDuration = Number(config.order_duration * 60 * 60 * 1000)
					// 最小計費時長
					// let minChargingDuration = Number(config.charging_min_time.split(':')[1] * 60 * 1000)
					let minChargingDuration = Number(config.charging_min_time) * 60 * 1000
					// console.log(defaultBookDuration, minChargingDuration)

					// console.log(config.order_start_time, '11111')

					// 起約時間
					// let orderStartTime = Number(config.order_start_time.split(':')[0]) * 60 * 60 * 1000 + Number(config
					// 	.order_start_time.split(':')[1]) * 60 * 1000
					let orderStartTime = 0

					if (config.order_start_time) {
						orderStartTime = Number(config.order_start_time.split(':')[0]) * 60 * 60 * 1000 + Number(
							config
							.order_start_time.split(':')[1]) * 60 * 1000
					} else {
						orderStartTime = 0
					}

					// console.log(orderStartTime, '起約時間')

					let arr = []
					// if (minChargingDuration <= defaultBookDuration) {
					for (var i = orderStartTime; i <= 8 * 60 * 60 * 1000; i += minChargingDuration) {
						arr.push(i)
					}
					// } else {}

					let arr1 = []
					arr.forEach(item => {
						let h = Math.floor(item / 60 / 60 / 1000)
						let m = Math.floor((item % (60 * 60 * 1000) / 60 / 1000))
						if (h > 0) {
							if (m > 0) {
								arr1.push(h + '小時' + m + '分鐘')
							} else {
								arr1.push(h + '小時')
							}
						} else {
							arr1.push(m + '分鐘')
						}
					})
					// console.log(arr1)
					this.columns = [
						[...arr1, '全天']
					]

				} else {
					this.columns = [
						['1小時', '2小時', '3小時', '4小時', '5小時', '6小時', '7小時', '8小時', '全天']
					]
				}
			},
			updateEndTime(start, duration) {
				// console.log(start, duration, '11111111111')
				let startH = Number(start.split(':')[0]) * 60 * 60 * 1000
				let startM = Number(start.split(':')[1]) * 60 * 1000

				if (duration) {
					if (duration.indexOf('小時') !== -1) {
						if (duration.indexOf('分鐘') !== -1) {
							let h = Number(duration.split('小時')[0]) * 60 * 60 * 1000
							let m = Number(duration.split('小時')[1].split('分鐘')[0]) * 60 * 1000

							let endH = Math.floor((startH + h + startM + m) / 60 / 60 / 1000)
							let endM = Math.floor(((startH + h + startM + m) % (60 * 60 * 1000) / 60 / 1000))
							// console.log(endH,endM,'0000000000')

							endH = endH >= 24 ? endH - 24 : endH

							this.endValue = this.montage(endH) + ':' + this.montage(endM)
							// console.log(this.endValue,'11111111111111')

						} else {
							let h = Number(duration.split('小時')[0]) * 60 * 60 * 1000
							let endH = Math.floor((startH + h) / 60 / 60 / 1000)

							endH = endH >= 24 ? endH - 24 : endH
							this.endValue = this.montage(endH) + ':' + start.split(':')[1]
							// console.log(this.endValue, '1111111')
						}
					} else {
						let m = Number(duration.split('分鐘')[0]) * 60 * 1000
						let endH = Math.floor((startH + startM + m) / 60 / 60 / 1000)
						let endM = Math.floor((startH + startM + m) % (60 * 60 * 1000) / 60 / 1000)
						endH = endH >= 24 ? endH - 24 : endH
						this.endValue = this.montage(endH) + ':' + this.montage(endM)
						// console.log(this.endValue,'1111111111')
					}
				}

				// console.log(this.endValue, '結束時間')
			},
			hourMinStamp(time) {
				let h = Number(time.split(':')[0]) * 60 * 60 * 1000
				let m = Number(time.split(':')[1]) * 60 * 1000
				return h + m
			},
			numTimeStamp(arr) {
				// console.log(arr,'arr')
				let a = arr.indexOf('次日')
				let arrStamp = arr.map((item, index) => {
					if (a !== -1) {
						if (index > a) {
							return item * 60 * 60 * 1000 + 24 * 60 * 60 * 1000
						} else if (index == a) {
							return 24 * 60 * 60 * 1000
						} else {
							return item * 60 * 60 * 1000
						}
					} else {
						return item * 60 * 60 * 1000
					}
				})
				this.num_time_stamp = [...arrStamp]
				// console.log(this.num_time_stamp,'11111')
			},
			roomTimeStamp(arr) {

				let a = arr.map(item => {
					let startH = new Date(item.start * 1000).getHours()
					let startM = new Date(item.start * 1000).getMinutes()
					let endH = new Date(item.end * 1000).getHours()
					let endM = new Date(item.end * 1000).getMinutes()
					return {
						start: startH + ':' + startM,
						end: endH + ':' + endM
					}
				})

				let b = a.map(item => {
					if (this.hourMinStamp(item.start) >= this.hourMinStamp(item.end)) {
						return {
							start: this.hourMinStamp(item.start),
							end: this.hourMinStamp(item.end) + 24 * 60 * 60 * 1000
						}
					} else {
						return {
							start: this.hourMinStamp(item.start),
							end: this.hourMinStamp(item.end)
						}
					}

				})

				this.room_times_color = [...b]
			},
			cut(time, type) {
				time = time.toString()
				if (time.indexOf(':') !== -1) {
					if (type == 'hour') {
						return time.split(':')[0]
					} else if (type == 'minute') {
						return time.split(':')[1]
					}
				} else {
					if (type == 'hour') {
						return time
					} else if (type == 'minute') {
						return ''
					}
				}
			},
			convertTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = this.montage(time.getMonth() + 1)
				let d = this.montage(time.getDate())
				return y + '/' + m + '/' + d
			},
			selectCard(item) {
				if (this.rechargeCardInfo) {
					if (this.rechargeCardInfo.id == item.id) {
						this.rechargeCardInfo = null
					} else {
						this.rechargeCardInfo = item
					}
				} else {
					this.rechargeCardInfo = item
				}

				this.selectCardText = this.rechargeCardInfo ? this.rechargeCardInfo.title : '選擇儲值卡'

				this.showCardPopup = false
			},
			setMemberPrice(price) {
				// if (this.storeDetails.vip_rate == 0) {
				// 	return Number(price)
				// } else {
				// 	return (Number(price) * this.storeDetails.vip_rate / 10)
				// }

				if (this.userStoreInfo.user_level) {
					if (this.storeDetails.vip_rate == 0) {
						return Number(price)
					} else {
						return (Number(price) * this.storeDetails.vip_rate / 10)
					}
				} else {
					return Number(price)
				}
			},

			// 时间条
			setTimeBar() {
				const systemInfo = uni.getSystemInfoSync();
				let time = this.bookDay
				if (systemInfo && systemInfo.platform === 'ios') {
					time = time.replace(/-/g, '/')
				}
				this.timeBar = []
				this.timeBarText = []
				// 获取当前时间的时间戳
				let now = new Date(`${time} ${dayjs().hour()}:${dayjs().minute()}`).getTime()
				let end = now + 3600000 * 24
				for (var i = now; i <= end; i += 1800000) {
					this.timeBar.push(i)
				}
				for (var j = now; j <= end; j += 3600000) {
					this.timeBarText.push(this.setTimeHours(j))
				}
			},
			setTimeHours(num) {
				return new Date(num).getHours()
			},
			orderTimelot(arr) {
				if (!arr.length) return []
				let a = []
				arr.forEach(item => {
					a.push({
						start: item.start * 1000,
						end: item.end * 1000
					})
				})
				return a
			},
			setWidth(time, item) {
				return item.end / time * 100
				// console.log(item.end / time)
				// return 100
			},

			setPayment(arr) {
				if (this.first) return
				this.first = true
				arr.forEach(item => {
					console.log(item, '支付方式')
					switch (item) {
						case 1:
							this.paymentMethod.push({
								value: '信用卡/轉帳 藍新',
								checked: false
							})
							if (this.systemInfo.platform == 'ios' && this.storeDetails.id == 76) {
								this.paymentMethod.push({
									value: 'Apple pay',
									checked: false
								})
							}
							break;
						case 2:
							this.paymentMethod.push({
								value: '信用卡/轉帳 綠界',
								checked: false
							})
							break;
						case 4:
							if (this.storeDetails.id == 76) {
								this.paymentMethod.push({
									value: 'Line Pay',
									checked: false
								})
							}
							break;
						case 9:
							if (this.storeDetails.id == 76) {
								this.paymentMethod.push({
									value: 'Apple pay',
									checked: false
								})
							}

							break;
						case 10:
							if (this.systemInfo.platform == 'Android') {
								this.paymentMethod.push({
									value: 'Google pay',
									checked: false
								})
							}
							break;
					}
				})

			},
		},
		computed: {}
	}
</script>

<style lang="less" scoped>
	.container {
		height: calc(100vh - 90rpx);
		background: #F3F5F9;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.book_name {
			display: flex;
			align-items: center;

			text {
				font-size: 36rpx;
				font-weight: bold;
			}

			.book_state {
				width: 117rpx;
				height: 46rpx;
				background: #39B19D;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				margin-left: 41rpx;
				text-align: center;
				line-height: 46rpx;
				color: #FFF;
				font-size: 30rpx;
			}

			.cleaning {
				// width: 235rpx;
				height: 46rpx;
				border-radius: 16rpx;
				border: 1rpx solid #707070;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;

				.using_text {
					width: 92rpx;
					height: 100%;
					background: #FA533D;
					font-size: 30rpx;
					text-align: center;
					line-height: 46rpx;
					border-radius: 16rpx;
					color: #fff;
				}

				.cleaning_text {
					background-color: #39B19D;
				}

				.count_down {
					font-size: 30rpx;
					margin-right: 10rpx;
					display: flex;
					align-items: center;
				}
			}

			.free {
				width: 117rpx;
				height: 46rpx;
				background: #39B19D;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				line-height: 46rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
			}
		}

		.book_box {
			// width: 690rpx;
			// height: 1162rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin-top: 16rpx;
			padding-top: 16rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;

			.book_date {
				padding: 0 13rpx;
				display: flex;
				justify-content: space-between;

				.day_week {
					width: 89rpx;
					height: 81rpx;
					background: #fff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					border: 1rpx solid #707070;
					font-size: 24rpx;
					padding: 9rpx;
					box-sizing: border-box;
					text-align: center;
				}

				.active {
					background: #39B19D;
					border-color: #39B19D;
					color: #fff;
				}
			}

			.select_package_title {
				font-size: 28rpx;
				margin: 30rpx 25rpx 10rpx;
				color: #000;
				background-color: #FA533D;
				padding: 5rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 30rpx;
				}
			}

			.select_package {
				padding: 0 25rpx;
				max-height: 220rpx;
				overflow: hidden;
				overflow-y: scroll;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.select_package_item {
					// width: 628rpx;
					width: 45%;
					height: 57rpx;
					background: #F3F5F9;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					border: 1rpx solid #707070;
					padding: 0 15rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 11rpx;
				}

				.active {
					background: #E4E5F8;

					text {
						color: #1C36CD;
					}

					.member_price {
						color: #FA533D;
					}
				}
			}

			.select_time {
				margin: 31rpx 0 72rpx;


				.start_time,
				.end_time {
					display: flex;
					align-items: center;
					padding: 0 37rpx 0 13rpx;
					box-sizing: border-box;
					// margin-bottom: 19rpx;

					text {
						font-size: 24rpx;
					}

					.inp {
						width: 514rpx;
						// flex: 1;
						height: 57rpx;
						background: #F3F5F9;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						border: 1rpx solid #707070;
						padding: 0 16rpx;
						box-sizing: border-box;
						margin-left: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 31rpx;
							height: 26rpx;
						}
					}

					.active {
						background-color: #ccc;
						color: #666;
					}

				}

				.defaultclass {
					font-size: 20rpx;
					color: #999;
				}
			}

			.period_time {
				padding: 0 11rpx;

				.book_day {
					font-size: 17rpx;
					margin-bottom: 15rpx;
				}

				.bs_deep {
					position: relative;
				}

				.deep {
					background: #39B19D;
					height: 30rpx;
					// width: 30rpx;
					width: 100%;
					position: absolute;
				}

				.item {
					display: flex;
					font-size: 17rpx;
					text-align: center;

					view {
						display: flex;
						justify-content: center;
						flex-direction: column;
					}
				}

				.book_state_time {
					padding: 0 11rpx;

					.bs {
						border: 1rpx solid #707070;
						border-right: none;
						position: relative;

						&:last-child {
							border-right: 1rpx solid #707070;
						}

						&:nth-child(2n) {
							border-left: none;

							&::before {
								content: '';
								width: 1rpx;
								height: 50%;
								display: block;
								position: absolute;
								background-color: #FA533D;
								left: 0%;
								bottom: 0%;
								z-index: 2;
							}
						}

						.bs_deep {
							position: relative;
						}

						.deep {
							background: #39B19D;
							height: 30rpx;
							// width: 30rpx;
							width: 100%;
							position: absolute;
							z-index: 1;
						}
					}

					.item {
						display: flex;
						font-size: 17rpx;
						// text-align: center;

						view {
							display: flex;
							justify-content: center;
							flex-direction: column;
						}
					}
				}
			}

			.packages_number {
				margin-top: 54rpx;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 0 16rpx;

				.stepper {
					display: flex;
					width: 150rpx;

					button {
						width: 40rpx;
						height: 40rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						border: 1rpx solid #707070;
						padding: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						margin: 0;
						font-size: 30rpx;
					}

					text {
						font-weight: bold;
						// display: inline-block;
						margin: 0 28rpx;
					}
				}
			}

			.order_money {
				font-size: 30rpx;
				padding: 0 20rpx 0 16rpx;
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #000;

				.active {
					color: orangered;
				}
			}
		}

		.place_order {
			margin: 23rpx 0rpx 47rpx;

			.title {
				font-size: 30rpx;
				color: #000;
				font-weight: bold;
			}

			.prompt {
				font-size: 30rpx;
				color: #000;
				margin-top: 10rpx;
			}
		}

		.determine {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			text {
				font-size: 30rpx;
				color: #FA533D;
				font-weight: bold;
			}

			.determine_btns {
				display: flex;

				.determine_btns_item {
					width: 130rpx;
					height: 51rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					border: 1rpx solid #39B19D;
					margin-left: 45rpx;
					line-height: 51rpx;
					text-align: center;
					color: #39B19D;
					font-weight: bold;
					font-size: 28rpx;
				}
			}
		}

		.popup_box {
			padding-top: 45rpx;
			box-sizing: border-box;

			.radio_box {
				display: flex;
				flex-direction: column;
				padding: 0 67rpx 0 46rpx;
				box-sizing: border-box;

				label {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 33rpx;
					font-size: 36rpx;

					.active {
						color: #39B19D;
					}
				}
			}

			.confirm_payment {
				width: 476rpx;
				height: 110rpx;
				background: #39B19D;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				font-size: 36rpx;
				line-height: 110rpx;
				text-align: center;
				color: white;
				margin: 197rpx auto 30rpx;
			}

			.popup_box_tips {
				color: #FA533D;

				font-size: 36rpx;
				font-weight: 600;
				margin-left: 36rpx;

				.popup_box_tips_details {
					display: flex;
					align-items: center;
				}
			}

			.payment_method {
				position: relative;

				.balance {
					position: absolute;
					bottom: -10rpx;
					right: 67rpx;
					font-size: 30rpx;
				}

				.card_text {
					position: absolute;
					bottom: -60rpx;
					left: 46rpx;
					width: 100%;
					// padding: 0;
				}
			}
		}

		.card_popup_box {
			width: 690rpx;
			max-height: 690rpx;
			border-radius: 16rpx;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;

			.card_item {
				height: 150rpx;
				border-radius: 16rpx;
				border: 1rpx solid #F3F5F9;
				margin-bottom: 30rpx;
				background-color: #F3F5F9;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					display: flex;
					justify-content: space-between;
				}

				.card_balance {
					font-size: 30rpx;

					text {
						color: #FA533D;
						font-weight: bold;
						margin-left: 10rpx;
					}
				}
			}

			.active {
				background-color: #39B19D;
				color: #fff;
			}
		}

	}

	.can_book_time {
		display: flex;
		justify-content: space-around;
		margin-bottom: 29rpx;

		text {
			font-size: 24rpx;
			// margin-left: 7rpx;
			display: flex;
			align-items: center;

			&::before {
				content: "";
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
				background: #39B19D;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				border: 1rpx solid #707070;
				margin-right: 7rpx;
			}

			&:last-child::before {
				background-color: #fff;
			}
		}
	}
</style>